<template>
	<view v-if="load_state">
		<view class="empty-addr" v-if="!list.length && !loading">
			<image src="../../static/image/addr-empty.png" mode="widthFix" class="empty-icon"></image>
			<view class="empty-addr-name">您还没有添加收货地址，请新增收货地址</view>
			<view @tap="addAddr()">
				<addr-btn width="400" class="addr-btn">新增收货地址</addr-btn>
			</view>
		</view>
		<view class="addr-list" v-else>
			<view class="addr-list-item" v-for="item in list">
				<view class="addr-user">
					<text>收货人: {{item.name}}</text>
					<view class="addr-user-r">
						<text>{{item.mobile}}</text>
					</view>
				</view>
				<view class="addr-address">收货地址: {{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.address}}</view>
				<view class="addr-set">
					<radio-group @change="setDefault" class="set-default-btn">
						<radio :value="item.id.toString()" :checked="parseInt(item.is_default) > 0 ? true : false" style="transform: scale(0.6);" />
						<text>设为默认地址</text>
					</radio-group>
					<view class="addr-set-btn addr-set-btn_ed" v-if="!change">
						<view class="edit">
							<image src="../../static/image/order/edit01-2.png" mode=""></image><text @tap="edit(item.id)">编辑</text>
						</view>
						<view class="delete">
							<image @tap="deleteAddr(item.id)" src="../../static/image/order/delete.png" mode=""></image>
							<text>删除</text>
						</view>
					
					</view>
					<view class="addr-set-btn" v-else>
						<view class='addr-btns' @tap="selectAddr(item.id)">
							<i class="icon">&#xe619;</i>
							<text>选择</text>
						</view>
					</view>
				</view>
			</view>
			<view @tap="addAddr()">
				<addr-btn class="addr-btn" ><image src="../../static/image/order/add01-1.png" mode=""></image>新增收货地址</addr-btn>
			</view>
		</view>
		<!-- 遮罩层 -->
	<!-- 遮罩层 -->
	<view class="goods-model" v-if="loading">
	</view>
	</view>

</template>

<script>
	import addrBtn from '../../components/unit/button.vue';
	
	export default{
		components:{ addrBtn },
		data(){
			return {
				loading: true,
				list : [],
				is_empty : 0,
				change : 0,
				load_state : false
			}
		},
		onShow() {
			this.getData();
		},
		onLoad(e) {
			this.change = e.change;
		},
		methods:{
			//添加地址
			addAddr(){
				uni.navigateTo({
					url:'/pages/address/add-addr'
				})
			},
			//获取地址列表
			getData(){
				this.ajax('address/addrList',{
					success:(res) => {
						if(res.code == 1){
							this.list = res.msg;
							this.load_state = true;
							this.loading = false;
						}
					}
				})
			},
			//设置默认地址
			setDefault(e){
				var id = e.detail.value;
				this.ajax('address/setDefault',{
					data:{ id : id },
					success:(res) => {
						this.toast(res.msg);
						if(res.code){
							for(var i in this.list) {
								this.list[i].is_default = 0;
							}
							setTimeout(()=>{
								this.loading = true;
								this.list = [];
								this.getData();
							},1000)
						}
						
					}
				});
			},
			//删除收货地址
			deleteAddr(id){
				uni.showModal({
				    title: '提示',
				    content: '确定删除该收货地址？',
				    success: (res) => {
				        if (res.confirm) {
				            this.ajax('address/deleteAddr',{
								data:{ id : id },
								success:(res) => {
									this.toast(res.msg);
									if(res.code) {
										setTimeout(()=>{this.getData();},1000);
									}
								}
							})
				        } else if (res.cancel) {
				        }
				    }
				})
			},
			//编辑收货地址
			edit(id){
				uni.navigateTo({
					url:'/pages/address/edit?id='+id
				})
			},
			//选择地址
			selectAddr(id){
				uni.setStorageSync('addr_id',id);
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;
	}
	.addr-user-r {
		image {
			width: 30upx;
			height: 30upx;
			margin-left: 20upx;
		}
	}
	.empty-addr::before{content: '';display: table;}
	.empty-icon{width: 180upx;display: block;margin: auto;margin-top:40%;}
	.empty-addr-name{text-align: center;margin-top:60upx;color:#b5b5b5;}
	.addr-btn{margin-top:50upx; position: relative; padding-left: 10%;}
	.addr-btn image {
		width: 32upx;
		height: 32upx;
		position: absolute;
		top: 50%;
		left: 40%;
		transform: translate(-50%,-50%);
		// vertical-align: middle;
		// margin-right: 20upx;
		// position: relative;
		// top: -2upx;
	}
	.addr-list{width: 100%;}
	.addr-list-item{padding:20upx ; background-color: #FFFFFF; margin-bottom: 10upx;}
	.addr-list-item:first-child{border:none;}
	.addr-user{
		font-size: 34upx;
		display: flex;
		justify-content: space-between;
	}
	.addr-user > text{margin-right: 60upx;}
	.addr-address{color:#999999;border-bottom: 1upx solid #ededed;padding:20upx 0;}
	.addr-set{
		width: 100%;height: 50upx;
	line-height: 50upx;padding:20upx 0;
	overflow: hidden;
	color: #4e4e4e;
	}
	.set-default-btn{
			float: left;
		 margin-left: -8upx;
		 position: relative;
		 }
	.set-default-btn text { position: absolute; width: 300upx; top:2upx}
	.addr-set-btn{float: right;text-align: right; color:#666666;}
	.addr-btns{display: inline-block;margin-left: 20upx;width: 130upx;height:55upx;line-height: 55upx;border:1upx solid #c2c2c2;text-align: center;border-radius: 5upx;font-size: 28upx;}
	.addr-btns .icon{margin-right: 10upx;font-size: 28upx;font-weight: bold;}
.goods-model{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	background: #fff;
	z-index:9;
}
.addr-set-btn .edit {
	
	image {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
		vertical-align: middle;}
	margin-right: 40upx;
}
.addr-set-btn_ed {
	display: flex;
	text {
		position: relative;
		top: 3upx;
	}
}
.addr-set-btn .delete {
	image {
		width: 30upx;
		height: 30upx;
		margin-right: 10upx;
		vertical-align: middle;
	}
}
</style>
